{% extends 'layout/indexframe.html' %}

{% block title %}charts{% endblock %}

{% block css %}
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(188, 227, 236);
        }

    </style>
{% endblock %}

{% block content %}

    <div id="container" style="height: 500px"></div>

{% endblock %}

{% block js %}

    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };


        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>



{% endblock %}